<template>
  <div class="account-main">
    <div class="column-part" ref="orderTable">
      <Order
        :showTitle="true"
        :column="afterSaleMenu"
        :title="`售后管理`"
        :orderData="orderData"
        v-model:activeName="activeName"
      >
        <template #operation="{ row }">
          <div class="operation">
            <div class="title thumb">售后评价</div>
            <!-- <div class="title thumb">查看物流</div>
            <div class="title thumb">订单退回</div>
            <div class="title thumb">申请售后</div>
            <div class="title thumb">复购</div> -->
          </div>
        </template>
      </Order>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref, computed, watch, nextTick } from "vue";
// import { publicUrl, twoFixed } from "@/utils/util";
import Order from "@/components/Order/index.vue";
import orderData from "@/json/myOrder.json";
import { useRoute } from "vue-router";
import afterSaleMenu from "@/json/afterSaleMenu.json";

import { useWindowSize } from "@vueuse/core";




const route = useRoute();

const act = computed(() => route.query.act);

const activeName = ref<number>(0);

const orderTable = ref<any>(null);

const { width: windosWidth } = useWindowSize();
// const { top } = useElementBounding(orderTable);

watch(
  () => act.value,
  (newValue) => {
    switch (newValue) {
      case "0":
      case "1":
      case "2":
      case "3":
      case "4":
      case "5":
      case "6":
        activeName.value = Number(newValue);
        nextTick(() => {
          
            document.documentElement.scrollTop =
              orderTable.value.offsetTop + windosWidth.value / 10.5;
          
        });
        break;
      default:
        activeName.value = 0;
        document.documentElement.scrollTop = 0;
        break;
    }
  },
  { immediate: true }
);





</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
